<template>
  <div class="main-box">
    <div class="main-part-bg"></div>
    <!-- <div class="bottom-color"></div> -->
    <div class="main-part">
      <div class="main-content">
        <div class="tag-part">
          类型：
          <div
            class="tag-content"
            v-for="(item, index) in tabList"
            :key="index"
            :class="{ 'tag-content-chosed': item.chosed === true }"
            @click="choseTag(item)"
          >
            {{ item.type }}
          </div>
        </div>
        <div class="sort-part">
          <div
            class="sort-content"
            :class="{ 'sort-content-chosed': sortNewest === true }"
            @click="choseSort"
          >
            按最新
            <img class="arrow-icon" v-if="sortNewest !== true" :src="down" />
            <img
              class="arrow-icon"
              v-if="sortNewest === true"
              :src="downChosed"
            />
          </div>
          <div
            class="sort-content"
            :class="{ 'sort-content-chosed': sortNewest !== true }"
            @click="choseSort"
          >
            按最旧
            <img class="arrow-icon" v-if="sortNewest === true" :src="down" />
            <img
              class="arrow-icon"
              v-if="sortNewest !== true"
              :src="downChosed"
            />
          </div>
        </div>
        <div class="table-part">
          <el-table
            :data="tableData"
            style="width: 100%"
            :show-header="false"
            :stripe="false"
            :highlight-current-row="false"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="date" label="日期" sortable width="1154px">
              <template slot-scope="scope">
                <div class="table-inside">
                  <div class="table-left">
                    <div class="type-icon">
                      <img
                        class="icon-img"
                        v-if="scope.row.type === 'docx'"
                        :src="docx"
                      />
                      <img
                        class="icon-img"
                        v-if="scope.row.type === 'pdf'"
                        :src="pdf"
                      /><img
                        class="icon-img"
                        v-if="scope.row.type === 'xlsx'"
                        :src="xlsx"
                      /><img
                        class="icon-img"
                        v-if="scope.row.type === 'pptx'"
                        :src="pptx"
                      />
                    </div>
                    <div class="content-text">
                      <div class="content-title">{{ scope.row.title }}</div>
                      <div class="content-date">
                        更新时间：{{ scope.row.date }}
                      </div>
                    </div>
                    <!-- <span style="margin-left: 10px">{{ scope.row.date }}</span> -->
                  </div>
                  <div class="edit-tr">
                    <div
                      class="button-open"
                      @click="handleOpen(scope.$index, scope.row)"
                    >
                      <img class="open-icon" :src="open" />
                      查看
                    </div>
                    <div
                      class="button-download"
                      @click="handleDownload(scope.$index, scope.row)"
                    >
                      <img class="download-icon" :src="download" />
                      下载
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="edit-tr">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import down from "../../../img/xiazai/down.png";
import downChosed from "../../../img/xiazai/down-chosed.png";
import docx from "../../../img/xiazai/type-docx.png";
import pdf from "../../../img/xiazai/type-pdf.png";
import pptx from "../../../img/xiazai/type-pptx.png";
import xlsx from "../../../img/xiazai/type-xlsx.png";
import download from "../../../img/xiazai/download.png";
import open from "../../../img/xiazai/open.png";

export default {
  data() {
    return {
      docx,
      pdf,
      pptx,
      xlsx,
      download,
      open,
      down,
      downChosed,
      sortNewest: true,
      tabList: [
        { type: "全部", chosed: false },
        { type: "使用手册", chosed: false },
        { type: "月报", chosed: false },
        { type: "季报", chosed: false },
        { type: "常见问题", chosed: false },
        { type: "通知公告", chosed: false },
      ],
      tableData: [
        {
          date: "2022-12-26",
          title: "长江流域主题数据管理系统操作手册.docx",
          type: "docx",
        },
        {
          date: "2022-12-26",
          title: "长江流域主题数据管理系统上报指南.docx",
          type: "docx",
        },
        {
          date: "2022-12-26",
          title: "2022年12月长江流域主题数据管理系统数据汇总月报.pdf",
          type: "pdf",
        },
        {
          date: "2022-12-26",
          title: "2022年12月长江流域主题数据管理系统数据治理月报.pdf",
          type: "pdf",
        },
        {
          date: "2022-12-26",
          title: "2022年11月长江流域主题数据管理系统数据汇总月报.xlsx",
          type: "xlsx",
        },
        {
          date: "2022-12-26",
          title: "2022年11月长江流域主题数据管理系统数据治理月报.xlsx",
          type: "xlsx",
        },
        {
          date: "2022-12-26",
          title: "2022年度长江流域主题数据管理系统操作手册.pptx",
          type: "pptx",
        },
        {
          date: "2022-12-26",
          title: "2022年度长江流域主题数据管理系统上报指南.pptx",
          type: "pptx",
        },
        {
          date: "2022-12-26",
          title: "2022年10月长江流域主题数据管理系统数据汇总月报.pdf",
          type: "pdf",
        },
        {
          date: "2022-12-26",
          title: "2022年10月长江流域主题数据管理系统数据治理月报.pdf",
          type: "pdf",
        },
      ],
    };
  },
  methods: {
    // tag点击事件
    choseTag(item) {
      item.chosed = !item.chosed;
    },
    // 排序方式点击事件（时间）
    choseSort() {
      this.sortNewest = !this.sortNewest;
    },
    handleOpen(index, row) {
      console.log(index, row);
    },
    handleDownload(index, row) {
      console.log(index, row);
    },
  },
};
</script>
  
<style lang="less" scoped>
.main-box {
  position: relative;
  background: #ffffff;
  height: 1179px;
  width: 100%;
  display: flex;
  justify-content: center;

  .main-part-bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 613px;
    background: linear-gradient(180deg, #d9eaff 0%, #ffffff 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
  }
  .main-part {
    position: absolute;
    .main-content {
      padding: 18px 0;
      margin-top: 25px;
      width: 1200px;
      height: 1114px;
      background: #ffffff;
      .tag-part {
        margin-bottom: 23px;
        margin-left: 23px;
        margin-right: 23px;
        display: flex;
        // width: 100%;
        // height: 100%;
        // background: red;
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #222222;
        .tag-content {
          display: flex;
          margin-right: 30px;
          font-size: 14px;
          font-family: MicrosoftYaHei-, MicrosoftYaHei;
          font-weight: normal;
          color: #222222;
          cursor: pointer;
        }
        .tag-content-chosed {
          color: #3272ee;
        }
      }
      .sort-part {
        margin-bottom: 15px;
        margin-left: 23px;
        margin-right: 23px;
        display: flex;
        width: calc(100% - 69px);
        height: 44px;
        background: #f2f5f9;
        .sort-content {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 91px;
          height: 100%;
          border-right: 1px solid #e2e7ef;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          cursor: pointer;
        }
        .sort-content-chosed {
          color: #3272ee;
        }
        .arrow-icon {
          width: 7px;
          height: 9px;
          margin-left: 5px;
        }
      }
      .table-part {
        display: flex;
        justify-content: center;
        width: 100%;
        .table-inside {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .table-left {
            display: flex;
            // justify-content: center;
            align-items: center;
            .type-icon {
              display: flex;
              align-items: center;
              margin-left: 8px;
              margin-right: 18px;
              height: 47px;
              border-right: 1px solid #e2e7ef;
              .icon-img {
                margin-right: 19px;
                width: 24px;
                height: 23px;
              }
            }
            .content-text {
              .content-title {
                margin-bottom: 8px;
                font-size: 16px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #222222;
              }
              .content-date {
                font-size: 14px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #787878;
              }
            }
          }
          .edit-tr {
            display: flex;
            align-items: center;
            position: relative; /*重点*/
            z-index: 2; /*重点*/
            overflow: hidden;
            text-overflow: ellipsis;
            .button-open {
              margin-right: 16px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 86px;
              height: 30px;
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #555555;
              background: #ffffff;
              border-radius: 15px 15px 15px 15px;
              opacity: 1;
              border: 1px solid #e2e7ef;
              cursor: pointer;
              .open-icon {
                margin-right: 6px;
                width: 17px;
                height: 12px;
              }
            }
            .button-download {
              margin-right: 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 86px;
              height: 30px;
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
              background: #3272ee;
              border-radius: 15px 15px 15px 15px;
              opacity: 1;
              cursor: pointer;
              .download-icon {
                margin-right: 7px;
                width: 14px;
                height: 12px;
              }
            }
            .button-download:hover {
              width: 86px;
              height: 30px;
              background: #3272ee;
              box-shadow: 0px 3px 6px 1px rgba(1, 79, 233, 0.35);
              border-radius: 15px 15px 15px 15px;
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
.img-part {
  width: 100%;
  height: 100%;
}
::v-deep {
  .el-table tr {
    position: relative;
    margin-left: 23px;
    /* background-color: #FFF; */
    margin-bottom: 10px;
    display: inline-table;
    // width: 1173px;
    // width: 100%;
    width: calc(100% - 24px);
    height: 80px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 1px rgb(204 204 204 / 40%);
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    border: 1px solid #e2e7ef;
  }
  // hover阴影
  .el-table tbody tr.table-row-checked::after,
  .el-table tbody tr:hover::after {
    position: absolute;
    content: " ";
    // margin-left: 23px;
    width: 1132px; /*改动处*/
    // width: calc(100% - 24px);
    height: 80px;
    top: 0;
    left: -1px; /*改动处*/
    background: transparent;
    box-shadow: 0px 2px 6px 2px rgba(204, 204, 204, 0.4);
  }
  .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }
}
</style>